<!--
 * @Description: 底部第四个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 18222335065 2369811390@qq.com
 * @LastEditTime: 2022-09-07 20:28:20
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Mix } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadMix() {
      const expectData = [
        { value: 100, name: "展现" },
        { value: 80, name: "点击" },
        { value: 60, name: "访问" },
        { value: 40, name: "咨询" },
        { value: 30, name: "订单" },
      ];
      const actualData = [
        { value: 80, name: "展现" },
        { value: 50, name: "点击" },
        { value: 30, name: "访问" },
        { value: 10, name: "咨询" },
        { value: 5, name: "订单" },
      ];

      const plot = new Mix(this.$refs['container'], {
        appendPadding: [8, 40, 8, 18],
        syncViewPadding: true,
        meta: {
          value: { sync: true },
        },
        tooltip: { shared: true, showMarkers: false, showTitle: false },
        plots: [
          {
            type: "funnel",
            options: {
              data: expectData,
              yField: "value",
              xField: "name",
              shape: "pyramid",
              conversionTag: false,
              label: {
                position: "right",
                style: { fill: '#ffffff' },
                offsetX: 10,
              },
              funnelStyle: { fillOpacity: 0.85 },
            },
          },
          {
            type: "funnel",
            options: {
              data: actualData,
              yField: "value",
              xField: "name",
              shape: "pyramid",
              conversionTag: false,
              label: false,
              funnelStyle: { lineWidth: 1, stroke: "#fff" },
            },
          },
        ],
        interactions: [{ type: "element-active" }],
      });

      plot.render();
    },
  },
  created() {},
  mounted() {
    this.loadMix()
  },
};
</script>
<style scoped>
</style>